<template>
    <div class="claims">
        <el-table
            :data="
                claims.filter(
                    (data) =>
                        !search ||
                        data.name.toLowerCase().includes(search.toLowerCase())
                )
            "
            style="width: 100%"
            v-if="displayed == 'list'"
        >
            <el-table-column label="ApplyDate" prop="applyDate">
            </el-table-column>
            <el-table-column label="ApplyDate" prop="troubleDate">
            </el-table-column>
            <el-table-column label="ClaimsImages">
                <template slot-scope="scope">
                    <img
                        :src="
                            'http://localhost:3000/images/' +
                            scope.row.claimsImages
                        "
                        alt=""
                        width="70px"
                    />
                </template>
            </el-table-column>
            <el-table-column label="Order" prop="order"> </el-table-column>
            <el-table-column align="right">
                <template slot="header">
                    <!--slot-scope="scope" -->
                    <el-input
                        v-model="search"
                        size="mini"
                        placeholder="输入关键字搜索"
                    />
                </template>
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)"
                        >Edit</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                        >Delete</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <div class="edit" v-else style="width: 30%; margin: 0 0 0 30%">
            <el-form
                label-width="80px"
                :model="formLabelAlign"
                style="text-align: center"
            >
                <el-form-item label="申请时间">
                    <el-input v-model="formLabelAlign.applyDate"></el-input>
                </el-form-item>
                <el-form-item label="事故时间">
                    <el-input v-model="formLabelAlign.troubleDate"></el-input>
                </el-form-item>
                <el-form-item label="事故图片">
                    <el-input v-model="formLabelAlign.claimsImages"></el-input>
                </el-form-item>
                <el-form-item label="所属订单">
                    <el-input v-model="formLabelAlign.order"></el-input>
                </el-form-item>
                <el-button @click="updateClaim">修改</el-button>
            </el-form>
        </div>
    </div>
</template>


<script>
//引入仓库助手
import { createNamespacedHelpers } from "vuex";
//引入辅助函数
const { mapState, mapActions } = createNamespacedHelpers("claims");

export default {
    data() {
        return {
            search: "",
            //显示内容
            displayed: "list",
            //编辑列表信息
            formLabelAlign: {
                _id: "",
                applyDate: "",
                troubleDate: "",
                claimsImages: "",
                order: "",
            },
        };
    },
    mounted() {
        this.getClaims();
    },
    computed: {
        ...mapState(["claims"]),
    },
    methods: {
        ...mapActions(["getClaims", "editClaims", "deleteClaims"]),

        handleEdit(index, row) {
            console.log(index, row);
            this.displayed = "edit";
            this.formLabelAlign._id = row._id;
            this.formLabelAlign.applyDate = row.applyDate;
            this.formLabelAlign.troubleDate = row.troubleDate;
            this.formLabelAlign.claimsImages = row.claimsImages;
            this.formLabelAlign.order = row.order;
        },
        updateClaim() {
            this.editClaims({
                _id: this.formLabelAlign._id,
                applyDate: this.formLabelAlign.applyDate,
                troubleDate: this.formLabelAlign.applyDate,
                claimsImages: this.formLabelAlign.applyDate,
                order: this.formLabelAlign.applyDate,
            });
        },
        async handleDelete(index, row) {
            const data = await this.deleteClaims({ _id: row._id });
            if (data.status) {
                console.log(data);
                this.getClaims();
            }
        },
    },
};
</script>

<style>
</style>